/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: kanglang
 * @LastEditTime: 2021-02-19 09:46:05
 * @Description: 回单预览
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  NativeModules,
  Linking,
  Modal,
  SafeAreaView,
  TouchableOpacity,
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import { iconWayOrderCoffee, iconWayOrderGray, iconLeft } from '../../../../image';
import { BackImage, msg, Header } from '../../../../common';
import { isAndroid, mainBgColorLightGray, mainBgColorWhite, screenWidth, screenHeight } from '../../../../common/styles';
import XmList from '../../../../components/XmList';
import px2dp from '../../../../utils/px2dp';
import px2wp from '../../../../utils/px2wp';

export default class Source extends React.Component {
  // static navigationOptions = () => ({
  //   title: '运单',
  //   tabBarIcon: ({ focused }) => (
  //     <Image
  //       source={focused ? iconWayOrderCoffee : iconWayOrderGray}
  //       style={{ width: 24, height: 24 }}
  //     />
  //   ),
  // });

  constructor(props) {
    super(props);
    this.state = ({
      modalVisible: false,
      transparent: true,
      previewModal: false,
      previewLabel: '',
      previewAdress: '',
      images: []
    });
  }

  // 返回
  _handleBack = () => {
    // DeviceEventEmitter.emit('UPDATE_INTEGRAL', true)
    msg.emit('router: back');
  }

  componentDidMount() {
    const images = [
      {
        url: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/144033/11/6016/130117/5f3ddedbE7651a003/55b07b1b5f29d6f3.jpg!q80.dpg.webp',
        type: '发货单',
        adress: '玉溪市红塔区二小区三号门7幢'
      },
      {
        url: 'https://m.360buyimg.com/mobilecms/s1125x1125_jfs/t1/99857/15/16631/88616/5e7cca1eE784c915d/3b9a241a0e5b82dc.jpg!q70.dpg.webp',
        type: '收货单',
        adress: '玉溪市红塔区二小区三号门10幢'
      }
    ];
    this.setState({
      previewLabel: images[0].type,
      previewAdress: images[0].adress,
    });
  }

  render() {
    const { previewLabel, previewAdress } = this.state;
    const images = [
      {
        url: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/144033/11/6016/130117/5f3ddedbE7651a003/55b07b1b5f29d6f3.jpg!q80.dpg.webp',
        type: '发货单',
        adress: '玉溪市红塔区二小区三号门7幢'
      },
      {
        url: 'https://axure-file.lanhuapp.com/327897b0-7111-44c8-8449-2973f7b7a922__ceed2bb8daef0af86a58f84ad564fba8.png',
        type: '收货单',
        adress: '玉溪市红塔区二小区三号门10幢'
      }
    ];
    return (
      <SafeAreaView>
        <Modal visible transparent onRequestClose={() => this._handleBack()}>
          <ImageViewer
            style={{ height: px2dp(300) }}
            imageUrls={images}
            onChange={(index) => {
              setTimeout(() => {
                this.setState({
                  previewLabel: images[index].type,
                  previewAdress: images[index].adress
                });
              }, 100);
            }}
            renderIndicator={(currentIndex, allSize) => {
              return (
                <View style={{ position: 'absolute', left: '49%', top: px2dp(20) }}>
                  <Text style={{ color: mainBgColorWhite }}>
                    {currentIndex}
                    /
                    {allSize}
                  </Text>
                </View>
              );
            }}
            renderHeader={() => {
              return (
                <View>
                  <TouchableOpacity onPress={() => this._handleBack()}>
                    <Image
                      style={{ width: px2dp(30), height: px2dp(30), margin: px2dp(20) }}
                      source={iconLeft}
                    />
                  </TouchableOpacity>
                </View>
              );
            }}
            renderFooter={() => {
              return (
                <View style={{ marginTop: px2dp(-100), flexDirection: 'row', justifyContent: 'space-between', width: screenWidth, paddingBottom: px2dp(12), paddingLeft: px2dp(20), paddingRight: px2dp(20) }}>
                  <Text style={{ color: mainBgColorWhite }}>{previewLabel}</Text>
                  <Text style={{ color: mainBgColorWhite }}>{previewAdress}</Text>
                </View>
              );
            }}

          />

        </Modal>

      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: mainBgColorLightGray,
  },

});
